<template>
  <div class="tip-tree-card">
    <div v-for="(item,index) in treesData" :key="index" class="card-col">
      <div class="card-col-panel">
        <div class="panel-row">
          <div class="card-node" @click="clickNode(item)">
            <div>{{item.username}}</div>
            <div>{{item.num}}</div>
            <div>{{item.username}}</div>
            <div>{{item.createTime}}</div>
          </div>

        </div>
        <div class="panel-row">
          <div class="col-line"></div>
        </div>
        <div class="panel-row">
          <div class="row-line"></div>
        </div>
        <div class="panel-row">
          <div class="col-line"></div>
          <div class="col-line"></div>
        </div>
        <div class="panel-row">
          <div class="panel-col" v-for="(item1,index1) in item.children" :key="index1">
            <div class="panel-row">
              <div class="card-node" @click="clickNode(item1)">
                <div>{{item1.username}}</div>
                <div>{{item1.num}}</div>
                <div>{{item1.username}}</div>
                <div>{{item1.createTime}}</div>
              </div>
            </div>
            <div class="panel-row">
              <div class="col-line"></div>
            </div>
            <div class="panel-row">
              <div class="row-line"></div>
            </div>
            <div class="panel-row">
              <div class="col-line"></div>
              <div class="col-line"></div>
            </div>
            <div class="panel-row">
              <div class="panel-col" v-for="(item2,index2) in item1.children" :key="index2">
                <div class="panel-row">
                  <div class="card-node" @click="clickNode(item2)">
                    <div>{{item2.username}}</div>
                    <div>{{item2.num}}</div>
                    <div>{{item2.username}}</div>
                    <div>{{item2.createTime}}</div>
                  </div>
                </div>
                <div class="panel-row">
                  <div class="col-line"></div>
                </div>
                <div class="panel-row">
                  <div class="row-line"></div>
                </div>
                <div class="panel-row">
                  <div class="col-line"></div>
                  <div class="col-line"></div>
                </div>
                <div class="panel-row">
                  <div class="panel-col" v-for="(item3,index3) in item2.children" :key="index3">
                    <div class="panel-row">
                      <div class="card-node" @click="clickNode(item3)">
                        <div>{{item3.username}}</div>
                        <div>{{item3.num}}</div>
                        <div>{{item3.username}}</div>
                        <div>{{item3.createTime}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TipTreeCard',
  props: {
    trees: {
      type: Object,
      required: false,
      default: '',
    }
  },
  data () {
    return {
      treesData: []
    }
  },
  watch: {
    trees () {
      return this.updateTreesData()
    }
  },
  created () {
    this.updateTreesData()
  },
  methods: {
    clickNode (item) {
      this.$emit('change', item)
    },
    updateTreesData () {
      this.treesData = [{
        uid: this.trees ? this.trees.uid : '',
        username: this.trees ? this.trees.username : '',
        nickname: this.trees ? this.trees.nickname : '',
        num: this.trees ? this.trees.num : '',
        createTime: this.trees ? this.trees.createTime : '',
        children: this.trees ? this.genChildren(2, this.trees.children) : this.genChildren(2, null)
      }]
    },
    genChildren (level, children) {
      if (level < 4) {
        return [{
          uid: children && children.length > 0 ? children[0].uid : '',
          username: children && children.length > 0 ? children[0].username : '',
          nickname: children && children.length > 0 ? children[0].nickname : '',
          num: children && children.length > 0 ? children[0].createTime : '',
          createTime: children && children.length > 0 ? children[0].createTime : '',
          children: children && children.length > 0 ? this.genChildren(level + 1, children[0].children) : this.genChildren(level + 1, null)
        }, {
          uid: children && children.length > 1 ? children[1].uid : '',
          username: children && children.length > 1 ? children[1].username : '',
          nickname: children && children.length > 1 ? children[1].nickname : '',
          num: children && children.length > 1 ? children[1].createTime : '',
          createTime: children && children.length > 1 ? children[1].createTime : '',
          children: children && children.length > 1 ? this.genChildren(level + 1, children[1].children) : this.genChildren(level + 1, null)
        }]
      } else {
        return [{
          uid: children && children.length > 0 ? children[0].uid : '',
          username: children && children.length > 0 ? children[0].username : '',
          nickname: children && children.length > 0 ? children[0].nickname : '',
          num: children && children.length > 0 ? children[0].createTime : '',
          createTime: children && children.length > 0 ? children[0].createTime : '',
          children: null
        }, {
          uid: children && children.length > 1 ? children[1].uid : '',
          username: children && children.length > 1 ? children[1].username : '',
          nickname: children && children.length > 1 ? children[1].nickname : '',
          num: children && children.length > 1 ? children[1].createTime : '',
          createTime: children && children.length > 1 ? children[1].createTime : '',
          children: null
        }]
      }

    }
  }

}
</script>
<style lang="less" scoped>
.tip-tree-card {
  width: 100%;
  .card-col {
    display: flex;
    justify-content: space-around;
  }
  .card-col-panel {
    flex: 1;
  }
  .panel-row {
    display: flex;
    justify-content: space-around;
  }
  .panel-col {
    flex: 1;
  }
  .card-node {
    box-sizing: border-box;
    padding: 5px;
    width: 120px;
    height: 100px;
    border: 1px solid #888888;
  }
  .col-line {
    width: 1px;
    height: 30px;
    background: #888888;
  }
  .row-line {
    width: 50%;
    height: 1px;
    background: #888888;
  }
}
</style>